<!-- 话题页面 -->
<template>
  <transition mode="out-in" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <div id="talkPage">
      <div class="talk_body">
        <!-- 头部菜单栏 -->
        <HomeHead :selectBtn="selectBtn"></HomeHead>
        <!-- 内容区域 -->
        <div class="content_box_out">
          <div class="content_box">
            <!-- 上方折叠栏区域 -->
            <div class="guide">
              当前话题是:{{ typeName }}
            </div>
            <!-- 左边内容区域 路由切换 -->
            <router-view></router-view>
            <!-- 左边内容区域 -->
            <div class="content_left_box">
              <!-- 卡片总区域 -->
              <div class="card_box">
                <!-- 卡片图片区域 -->
                <div class="card_img">
                  <img class="card_body_left_img"/>
                </div>
                <!-- 卡片标题 -->
                <div class="card_title_box">
                  <div class="text">{{typeName}}</div>
                  <p class="text1">本话题已加入知乎专题活动 »双十一购物全攻略 ，更多「购物」及「消费决策」</p>
                  <p class="text2">相关讨论欢迎参与讨论、分享。</p>
                </div>
                <!-- 关注话题 -->
                <div class="btn_follow" @click="addFollow">
                  <span class="btn_follow_span">关注话题</span>
                </div>
                <!-- 管理 日志 分享 -->
                <div class="btn_manage"><span>管理</span></div>
                <div class="btn_log"><span>日志</span></div>
                <div class="btn_share"><span>分享</span></div>
              </div>
              <div>
                <!-- 索引 讨论 精华 -->
                <talkDiscuss2></talkDiscuss2>
              </div>
            </div>
            <!-- 右边内容区域 -->
            <div class="content_right_box">
              <!-- 右边写东西功能区域 -->
              <div class="right_box_write">
              <div class="right_box_write_up">
                <!-- 关注者 -->
                <router-link to="">
                  <div class="focusers_box">
                    <div class="focusers_text">关注者</div>
                    <div class="focusers_text1">28,638</div>
                  </div>
                </router-link>
                <!-- 问题数 -->
                <router-link to="">
                  <div class="question_box">
                    <div class="focusers_text">问题数</div>
                    <div class="focusers_text1">1,324</div>
                  </div>
                </router-link>
              </div>
              <div class="right_box_write_down"></div>
            </div>
            </div>
            <!-- 父子话题区域 -->
            <div class="right_box_function">
              <div class="function_row_box">
                <!-- 父话题 -->
                <router-link to="">
                  <div class="function_box_parent">
                    <div class="function_text1">父话题</div>
                    <div class="row_box">
                      <div class="function_text2">生活用品</div>
                    </div>
                    <div class="function_text1">子话题</div>
                    <div class="row_box">
                      <div class="function_text2">斗图神器</div>
                    </div>
                    <div class="row_box1">
                      <div class="function_text3">查看全部话题结构</div>
                    </div>
                  </div>
                </router-link>
                <router-link to="/"></router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import HomeHead from '../components/HomeHead'
import talkDiscuss2 from './talkPage/talkDiscuss2'
export default {
  name: 'talkPage',
  el: '#talkPage',
  components: {
    'HomeHead': HomeHead,
    'talkDiscuss2': talkDiscuss2
  },
  data () {
    return {
      selectBtn: 3,
      isOpen: false,
      changeCardRightBoxStyle: [{'width': '100%'}, {'padding': '0px'}],
      changeVoteStyle: [{'background-color': '#0084ff'}, {'color': 'white'}],
      changeBtnFollowStyle: {'background-color': '#8590a6'}
    }
  },
  props: ['cardList'],
  computed: {
  },
  methods: {
    addFollow () {
      if (this.cardList.isFollow) {
      } else {
      }
      this.cardList.isFollow = !this.cardList.isFollow
    }
  },
  created () {
    this.typeName = this.$route.params.typeName
  }
}
</script>

<style scoped>
  @import '../../../../static/css/talk/talkPage.css';
</style>
